{% extends 'base/base.html' %}
{% load static %}

{% block title %}妙趣积分商城 - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .points-header {
        background-color: #f0f7ff;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 30px;
    }
    
    .points-value {
        font-size: 2.5rem;
        font-weight: bold;
        color: #ff6b6b;
    }
    
    .points-label {
        color: #6c757d;
        font-size: 1rem;
    }
    
    .reward-card {
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.3s ease;
        height: 100%;
        border: 1px solid #f0f0f0;
    }
    
    .reward-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .reward-img {
        height: 180px;
        object-fit: cover;
        background-color: #f8f9fa;
    }
    
    .reward-points {
        background-color: #28a745;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-weight: bold;
    }
    
    .reward-btn {
        border-radius: 20px;
    }
    
    .reward-type {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 0.8rem;
        padding: 3px 10px;
        border-radius: 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="points-header d-flex justify-content-between align-items-center">
        <div>
            <h1 class="mb-3">积分商城</h1>
            <p class="text-muted mb-0">用积分兑换心仪好礼</p>
        </div>
        <div class="text-center">
            <div class="points-value">{{ user_points }}</div>
            <div class="points-label">我的积分</div>
            <a href="{% url 'points:history' %}" class="btn btn-sm btn-outline-primary mt-2">积分明细</a>
        </div>
    </div>
    
    <div class="row mb-4">
        <div class="col-12">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active" href="javascript:void(0)" data-filter="all">全部奖品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0)" data-filter="2">实物奖品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0)" data-filter="3">妙趣徽章</a>
                </li>
                <li class="nav-item ms-auto">
                    <a href="{% url 'points:exchanges' %}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-list-ul me-1"></i>我的兑换
                    </a>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="row row-cols-1 row-cols-md-3 row-cols-lg-4 g-4">
        {% for reward in rewards %}
        <div class="col reward-item" data-type="{{ reward.reward_type }}">
            <div class="card reward-card h-100">
                {% if reward.reward_type == 2 %}
                <span class="badge bg-danger reward-type">实物奖品</span>
                {% elif reward.reward_type == 3 %}
                <span class="badge bg-success reward-type">妙趣徽章</span>
                {% endif %}
                
                <img src="{{ reward.image_url|default:'/static/images/reward-default.jpg' }}" class="card-img-top reward-img" alt="{{ reward.name }}">
                <div class="card-body">
                    <h5 class="card-title">{{ reward.name }}</h5>
                    <p class="card-text text-muted small">{{ reward.description|truncatechars:50 }}</p>
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <span class="reward-points">{{ reward.points_required }} 积分</span>
                        
                        {% if reward.stock <= 0 %}
                        <button class="btn btn-sm btn-secondary reward-btn" disabled>已抢光</button>
                        {% elif user_points < reward.points_required %}
                        <button class="btn btn-sm btn-secondary reward-btn" disabled>积分不足</button>
                        {% else %}
                        <a href="{% url 'points:exchange' reward_id=reward.reward_id %}" class="btn btn-sm btn-primary reward-btn">立即兑换</a>
                        {% endif %}
                    </div>
                    {% if reward.reward_id in exchanged %}
                    <div class="text-success small mt-2">
                        <i class="fas fa-check-circle"></i> 已兑换
                    </div>
                    {% endif %}
                </div>
                <div class="card-footer bg-transparent border-0">
                    <small class="text-muted">库存: {{ reward.stock }}</small>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <p class="text-muted">暂无可兑换奖品</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取筛选链接和商品元素
        const filterLinks = document.querySelectorAll('.nav-link[data-filter]');
        const rewardItems = document.querySelectorAll('.reward-item');
        
        // 为筛选链接添加点击事件
        filterLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有链接的active类
                filterLinks.forEach(item => item.classList.remove('active'));
                
                // 为当前点击的链接添加active类
                this.classList.add('active');
                
                // 获取筛选值
                const filterValue = this.getAttribute('data-filter');
                
                // 筛选商品
                rewardItems.forEach(item => {
                    if (filterValue === 'all') {
                        item.style.display = 'block';
                    } else {
                        if (item.getAttribute('data-type') === filterValue) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    }
                });
            });
        });
    });
</script>
{% endblock %}
